<template>
	<view class="wxlogin">
		<uni-notice-bar show-icon text="微信首次登录，需要绑定已注册的邮箱账号" />
		<view class="form">
			<u--form labelPosition="left" :model="formData" :rules="rules" ref="form">
				<u-form-item label="邮箱" labelWidth="160rpx" prop="email" borderBottom>
					<u--input v-model="formData.email" type="email" border="none" placeholder="请输入邮箱"></u--input>
				</u-form-item>
				<u-form-item label="密码" labelWidth="160rpx" prop="password" borderBottom>
					<u--input v-model="formData.password" type="password" border="none" placeholder="请输入密码"></u--input>
				</u-form-item>
			</u--form>
		</view>

		<view class="btn_login"><button class="btn" plain :loading="loading" @click="login">绑定</button></view>
		
		<view class="bottom_content">
			<view class="register">
				还没有账号？ <text class="text" style="margin-left: 10rpx;" @click="goRegisterPage">马上注册</text>
			</view>
			<view class="forget_password">
				<text class="text" @click="openForgetPwd">忘记密码</text>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/common/api.js';
export default {
	data() {
		return {
			formData: {
				email: '',
				password: ''
			},
			rules: {
				email: {
					validator: (rule, value, callback) => {
						return uni.$u.test.email(value);
					},
					message: '邮箱不正确',
					trigger: ['blur']
				},
				password: {
					type: 'string',
					required: true,
					message: '请输入密码',
					trigger: ['blur']
				}
			},
			loading: false,
		};
	},
	onReady() {
		this.$refs.form.setRules(this.rules);
	},
	methods: {
		async login() {
			let isPass = await this.validateForm();
			// console.log('isPass ==>', isPass);
			if (!isPass) {
				return false;
			}
			this.loading = true;
			try {
				let res = await this.$ajax({
					url: api.login1,
					method: 'POST',
					data: {
						email: this.formData.email,
						password: this.formData.password,
						open_id: uni.getStorageSync('openid'),
						avatar: uni.getStorageSync('wxUserInfo').avatarUrl
					},
				});
				console.log('loginRes ==>', res);
				if (res.data.code == '200') {
					uni.setStorageSync('access_token', res.data.data.access_token);
					this.$store.commit('login', res.data.data.user);
					// console.log('isLogin1 ==>', this.$store.state.isLogin);
					uni.navigateBack({
						delta: 2
					});
				}
				this.loading = false;
			} catch (e) {
				console.log(e);
				this.loading = false;
				uni.showToast({
					title: e.data.message,
					icon: 'none'
				})
			}
		},
		
		// 表单验证的方法
		validateForm() {
			return new Promise((resolve, reject) => {
				this.$refs.form
					.validate()
					.then(res => {
						resolve(true);
					})
					.catch(err => {
						resolve(false);
					});
			});
		},
		
		goRegisterPage() {
			uni.navigateTo({
				url: '../wxRegister/wxRegister'
			})
		},
		
		openForgetPwd() {
			uni.navigateTo({
				url: '../forgetPwd/forgetPwd'
			})
		}
	}
};
</script>

<style lang="scss">
.wxlogin {
	.form {
		padding: 0 32rpx;
	}
	.btn_login {
		margin: 40rpx 32rpx;
	}
	.btn {
		height: 88rpx;
		line-height: 88rpx;
		background-color: #1890FF;
		color: #fff;
		border: 2rpx solid #1890FF;
		border-radius: 44rpx;
		font-size: 28rpx;
		font-weight: 700;
	}
	.bottom_content {
		display: flex;
		justify-content: space-between;
		font-size: 28rpx;
		margin: 0 32rpx;
	}
	.text {
		color: #1890FF;
	}
}
</style>
